<template>
  <a-layout>
    <a-affix :offset-top="top">
      <a-layout-header :style="headerStyle">
        <div>
          <router-link to="/">
            <a-image
              :width="180"
              :preview="false"
              src="https://pic.imgdb.cn/item/65564497c458853aeffcd358.png"
            />
          </router-link>
        </div>
      </a-layout-header>
    </a-affix>

    <a-layout-content :style="contentStyle">
      <div class="content_top">
        <a-tabs v-model:activeKey="activeKey" :tabBarGutter=100 tab-position="left" animated>
          <a-tab-pane key="1" tab="周边店铺">
            <div>
              <StoreIndex />
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="周边商品">
            <GoodsIndex />
          </a-tab-pane>
          <a-tab-pane key="3" tab="周边趣事">Content of Tab 3</a-tab-pane>
        </a-tabs>
      </div>
    </a-layout-content>
  </a-layout>
</template>
<script setup>
import { ref, onMounted } from "vue";
import StoreIndex from '@/views/perimeter/store/Index.vue';
import GoodsIndex from '@/views/perimeter/goods/Index.vue';

const activeKey = ref("1");

const headerStyle = {
  color: "black",
  height: "85px",
  backgroundColor: "#fff",
};

const contentStyle = {
  backgroundColor: "#F0F2F5",
  height: "110vh",
};
</script>
<style scoped>
a:hover {
  color: red;
}
a:link {
  color: rgb(108, 105, 105);
}
.content_top {
  /* #f4f4f5 */
  background-color: #fff;
  margin-left: 130px;
  margin-right: 130px;
  height: 105vh;
  margin-top: 20px;
  border-radius: 8px;
  padding: 20px;
}
</style>